<template>
	<view style="padding: 0 20rpx 0 20rpx;">
		<view>
			<u-swiper :list="swiperList"
					@change="e => currentNum = e.current"
					height='210'
					interval='5000'
					indicatorStyle="right: 20px">
				<view slot="indicator"
					class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
				</view>
			</u-swiper>
		</view>
			
		<view class="data-box">
			<view class="cu-bar bg-white" style="padding: 0 20rpx;">
				<view class="action" @tap="gotoPage('/pages/home/notice/noticeDetail?notice='+encodeURIComponent(JSON.stringify(notice)))">
					<image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/70f904a57cc349209ca723d83dac1235.png" style="width: 80rpx;height: 80rpx;"></image>
					<view style="margin-left: 30rpx;" class="text_over">
						<text style="color: #36aed9;font-size: 32rpx;">
						{{notice.noticeTitle}}
						</text>
					</view>
				</view>
				<view class="action" @tap="gotoPage('/pages/home/notice/index')">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles"></text> 企业专题
				</view>
				<view class="action more" style="margin-right: 20rpx;" @click="gotoPage('/pages/home/video/list')">
					<text>查看全部</text><u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="topic grid col-1">
				<!-- <view class="topic-box" v-for="(item,index) in videos" :key="index" @tap="gotoPage('/pages/home/video/index?url='+item.url+'&title='+item.name+'&content='+item.content)"> -->

				<view class="topic-box" v-for="(item,index) in videos" :key="index">
					<view class="topic-main video-mian">
						<image :src="item.coverUrl" mode="aspectFill"></image>
						<view class="topic-text video-text">{{replaceSpecialChar(item.name)}}</view>
					</view>
				</view>
			</view>
		</view>
		
<!-- 		<view class="data-box">
			<view class="cu-bar bg-white">
				<view class="action data-box-title">
					<text class="cuIcon-titles text-rule"></text> 热门专题
				</view>
				<view class="action more" @tap="gotoPage('')">
					<text>查看全部</text><text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="topic grid col-2">
				<view class="topic-box" v-for="(item,index) in Topic" :key="index">
					<view class="topic-main">
						<image :src="item.imgurl" mode="aspectFill"></image>
						<view class="topic-text">{{replaceSpecialChar(item.name)}}</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import { getSwiperList, getNewNotice } from '@/api/home.js'
	import { wxPhoneLogin,getRouters, getInfo } from '@/api/login.js'
	export default {
		data() {
			return {
				notice:{},
				currentNum:0,
				swiperList: [],
				videos:[],
			}
		},
		onPullDownRefresh(){
			
		},
		onShow(){
			this.getNewNoticeData()
		},
		onLoad() {
			if (!this.hasLogin) {
				if(uni.getStorageSync("loginInfo")) {
					uni.login({
					  provider: 'weixin', //使用微信登录
					  success: async (loginRes) => {
						console.log(loginRes);
						const { data: { code, data,msg } } = await wxPhoneLogin({'xcxCode':uni.getStorageSync("loginInfo").user.phonenumber,'code':loginRes.code})
						if (code != 200) {
							uni.showToast({ title: msg, icon: 'none' })
							return
						}
						if (data && data.token) {
							this.$store.commit('login', {
								token: data.token
							})
							// 获取用户路由
							this.getRoutersData()
							// 获取用户信息
							this.getInfoData()
							uni.showToast({ title: '登录成功', icon: 'none' });
						}
					  }
					});
				}
			}
			this.getResource('APP首页头部轮播图片','swiperList')
			this.getResource('APP首页企业专题视频','videos')
		},
		onReachBottom() {
		    //触底后执行的方法，比如无限加载之类的
			
		},
		methods: {
			replaceSpecialChar(text) {
			  text = text.replace(/&quot;/g, '"');
			  text = text.replace(/&amp;/g, '&');
			  text = text.replace(/&lt;/g, '<');
			  text = text.replace(/&gt;/g, '>');
			  text = text.replace(/&nbsp;/g, ' ');
			  return text;
			},
			async getNewNoticeData(){
				const { data } = await getNewNotice();
				if(data.code == 200){
					this.notice = data.data
				}
			},
			async getResource(position,item){
				const { data } = await getSwiperList({position:position});
				if(data.code == 200){
					if(position.indexOf('图片')>0){
						this[item] = data.rows.map(e=>e.url)
					}else if(position.indexOf('视频')>0){
						this[item] = data.rows.slice(0,2)
					}
					// 视频资源
					// if(pics.indexOf('video') > -1){
					// 	data.data.forEach(item=>{
					// 		let obj = {};
					// 		obj.url = item.content;
					// 		obj.videoId = item.id;
					// 		obj.title = item.title;
					// 		obj.content = '';
					// 		obj.poster = item.content.replace('mp4','jpg')
					// 		that.videos.push(obj);
					// 	})
					// }
				}
			},
			async getInfoData(){
				const { data } = await getInfo();
				if(data.code === 200){
					uni.setStorageSync("loginInfo", data.data)
				}
			},
			async getRoutersData(){
				const { data } = await getRouters();
				if(data.code === 200){
					console.log('data.data:',data.data);
					uni.setStorageSync("routers", data.data)
				}
			},
		},
	}
</script>

<style lang="scss">
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	
	.text_over {
		text-overflow: ellipsis; //值为clip表示剪切，ellipsis时为显示省略号
		overflow: hidden;
		white-space: nowrap;
		width: 450rpx;
		color: #36aed9;
	}
	
	.indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }

    .indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
	
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
	
	.data-box{
		margin-top: 10rpx;
		background-color: #ffffff;
		/* box-shadow: 0px 0px 5px rgba(0,0,0,.1); */
		padding: 0rpx;
	}
	
	.data-box .cu-bar{
		border-bottom: solid 1px #f9f9f9;
	}
	
	.data-box-title{
		color: #333;
		font-size: 32rpx !important;
		font-weight: bold;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.more text{
		font-size: 24rpx;
		color: #999;
	}
	.more .cuIcon-right{
		font-size: 30rpx !important;
		color: #999;
	}
	
	.data-box  .cu-card.article>.cu-item .content>image{
		width: 220rpx;
		height: 6em;
		
		border-radius: 15upx;
	}
	
	.topic{
		// padding: 0rpx 15rpx;
		width: 100%;
	}
	.topic-box{
		padding:10rpx;
	}
	
	.topic-main{
		border-radius: 15rpx;
		overflow: hidden;
		
		height: 160rpx;
		position: relative;
	}
	.topic-main image{
		width: 100%;
		height: 160rpx;
		transition:0.3s all;
		-webkit-transition:0.3s all;
		-moz-transition:0.3s all;
		-o-transition:0.3s all;
		-ms-transition:0.3s all;
	}
	.topic-main:hover image{
		-webkit-transform:scale(1.3);
		-ms-transform:scale(1.3);
		transform:scale(1.3);
	}
	.topic-text{
		position: absolute;
		width: 100%;
		height: 160rpx;
		text-align: center;
		line-height: 160rpx;
		top: 0px;
		font-size: 30rpx;
		left: 0px;
		font-weight: bold;
		z-index: 10;
		background-color: rgba(0,0,0,0.3);
		color: #fff;
	}
	
	.video-mian{
		height: 260rpx;
	}
	.video-mian image{
		height: 260rpx;
	}
	.video-text{
		height: 260rpx;
		line-height: 260rpx;
	}
	
	.cu-bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100rpx;
		justify-content: space-between;
	}
	
	.cu-bar .action {
		display: flex;
		align-items: center;
		height: 100%;
		justify-content: center;
		max-width: 100%;
	}
	
	.cuIcon-titles {
		display: inline-block;
		vertical-align: bottom;
		height: 40rpx;
		width: 10rpx;
		background: #0081FF;
		margin: 0 20rpx 0 5rpx;
		border-radius: 10rpx;
	}
	
	/* grid布局 */
	
	.grid {
		display: flex;
		flex-wrap: wrap;
	}
	
	.grid.col-2.grid-square>view {
		padding-bottom: calc((100% - 20rpx)/2);
		height: 0;
		width: calc((100% - 20rpx)/2);
	}
	.grid.col-2.grid-square>view:nth-child(2n),
	.grid.col-3.grid-square>view:nth-child(3n),
	.grid.col-4.grid-square>view:nth-child(4n),
	.grid.col-5.grid-square>view:nth-child(5n) {
		margin-right: 0;
	}
	
	.grid.col-1>view {
		width: 100%;
	}
	
	.grid.col-2>view {
		width: 50%;
	}
</style>